<template>
  <div>
    <div v-if="this.$route.name == 'productionarea' || this.$route.name == 'viewmessage'" :class="changeStyle()">
      <vue-element-loading
        :active="this.$store.state.elementloading.vueElementLoading"
        spinner="spinner"
        color="#FF6700"
      />
      <el-card shadow="never">
        <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px">
          <el-form-item prop="baseName">
            <el-input v-model="searchMap.bName" placeholder="请输入基地名称" style="width:300px">
              <template slot="prepend">基地名称</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="baseArea">
            <el-select clearable v-model="searchMap.bArea" placeholder="基地面积" style="width: 150px">
              <el-option
                v-for="option in baseArea"
                :key="option.type"
                :label="option.name"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="allProduction">
            <el-select clearable v-model="searchMap.tYield" placeholder="总产量" style="width: 150px">
              <el-option
                v-for="option in allProduction"
                :key="option.type"
                :label="option.name"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="medicineValue">
            <el-input v-model="searchMap.tMedicinalQuality" placeholder style="width:250px">
              <template slot="prepend">药材质量</template>
            </el-input>
          </el-form-item>

          <el-form-item prop="medicineValue">
            <el-input v-model="searchMap.bInputLocation" placeholder style="width:300px">
              <template slot="prepend">基地地址</template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <div id="distpicker-warpper">
              <v-distpicker
                id="select-dis"
                :province="searchMap.province"
                :city="searchMap.city"
                :area="searchMap.area"
                @selected="onSelected"
                @province="handleProvince"
                @city="handleCity"
                @area="handleArea"
              ></v-distpicker>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button @click="searchBase" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        <el-button-group style="margin-bottom:20px">
          <el-button v-if="btnshow('productionarea-add')" @click="handleAdd" size="small" type="primary" icon="el-icon-plus"></el-button>
          <el-button v-if="btnshow('productionarea-update')" @click="handleEdit(radio)" size="small" type="primary" icon="el-icon-edit"></el-button>
          <el-button v-if="btnshow('productionarea-delete')" @click="deleteMedicinalProductBase(radio)" size="small" type="primary" icon="el-icon-delete"></el-button>
        </el-button-group>
        <!-- 数据列表
    :data 绑定渲染的数据
    border 表格边框
    防止报错：Error in v-on handler: "TypeError: Cannot read property 'length' of null"
        -->
        <!-- 这列表是真他喵的长 -->
        <el-table
          :data="list"
          max-height="450"
          border
          style="width: 100%"
          highlight-current-row
          @current-change="handleSelectionChange"
          @row-click="chooseone"
        >
          <el-table-column fixed width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
          <el-table-column fixed prop="bName" label="基地名称" width="200px"></el-table-column>
          <el-table-column prop="bArea" label="基地面积"></el-table-column>
          <el-table-column prop="bPosition" label="位置信息"></el-table-column>
          <el-table-column prop="environment" label="生态环境">
            <template slot-scope="scope">
              <el-button @click="openenvironment(scope.row)" size="mini" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="areaPhoto" label="基地照片">
            <template slot-scope="scope">
              <el-button @click="openbasephoto(scope.row)" size="mini" type="danger">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="company" label="所属公司">
            <template slot-scope="scope">
              <el-button @click="openCompany(scope.row)" size="mini" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="gpsPosition" label="Gps位置">
            <template slot-scope="scope">
              <el-button size="mini" @click="showgps(scope.row)" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="tCultivatedArea" label="栽培面积（亩）" width="120px"></el-table-column>
          <el-table-column prop="tReportableArea" label="可采收面积（亩）" width="140px"></el-table-column>
          <el-table-column prop="tYield" label="总产量（kg/年）" width="130px"></el-table-column>
          <el-table-column prop="medicineValue" label="药材质量">
            <template slot-scope="scope">
              <el-button @click="openmedicineValue(scope.row)" size="mini" type="danger">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="materialDirect" label="原料去向">
            <template slot-scope="scope">
              <el-button @click="toMedicinalGone(scope.row)" size="mini" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="tPrice" label="价格/流通" width="110px"></el-table-column>
          <el-table-column prop="tBreedMode" label="种繁模式"></el-table-column>
          <el-table-column prop="tEnvironment" label="种植环境"></el-table-column>
          <el-table-column prop="tFertilizeMethod" label="施肥方法"></el-table-column>
          <el-table-column prop="tPestsPrecaution" label="病虫害防法" width="110px"></el-table-column>
          <el-table-column prop="tCollecteTime" label="采收时间"></el-table-column>
          <el-table-column prop="tCollecteMethod" label="采收方法"></el-table-column>
          <el-table-column prop="tPart" label="药用部位"></el-table-column>
          <el-table-column prop="tTotally" label="净制"></el-table-column>
          <el-table-column prop="tProcess" label="产地加工方法" width="130px"></el-table-column>
          <el-table-column prop="tProportion" label="干/鲜比"></el-table-column>
          <el-table-column prop="tScale" label="分级与包装" width="130px"></el-table-column>
          <el-table-column prop="tSampleNum" label="取样量及编号" width="130px"></el-table-column>
          <el-table-column prop="tPlantNum" label="植物标本编号" width="130px"></el-table-column>
          <!-- <el-table-column prop="payType" label="支付类型" width="90">
        <template slot-scope="scope">
          <span>{{scope.row.payType | payTypeFilter }}</span>
        </template>
          </el-table-column>-->
          <el-table-column v-if="btnshow('productionarea-handle')" fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(radio)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteMedicinalProductBase(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 25]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

        <!--弹出新增窗口 
    title窗口的标题
    :visible.sync 当它为true的时候，窗口就会被弹出
        -->
        <el-dialog
          v-dialogDrag
          :close-on-click-modal="false"
          :title="this.title"
          :visible.sync="dialogFormAddNew"
          :lock-scroll="true"
          center
          @close="cleanAddNew"
          width="50%"
        >
          <!-- 
       v-dialogDrag
      style="width: 400px" 
          -->
          <add-new
            ref="addnew"
            @fetchData="fetchProductBase"
            @close="closeAddNew"
            :addnewData.sync="fpojo"
            :isEdit="isEdit"
          ></add-new>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddNew">取 消</el-button>
            <el-button @close="closeAddNew" type="primary" @click="addData()">确 定</el-button>
            <!-- <el-button
          type="primary"
          @click="pojo.id === null ? addData('addnew'):updateData('addnew')"
            >确 定</el-button>-->
          </div>
        </el-dialog>

        <!-- 生态环境弹窗 -->
        <el-dialog v-dialogDrag style="font-family:'微软雅黑'" title="环境详情" :visible.sync="dialogEnviroForm">
          <environment-form :enviroformData="enviroform"></environment-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogEnviroForm = false">关 闭</el-button>
          </div>
        </el-dialog>

        <!-- 基地照片弹窗 -->
        <el-dialog
          v-dialogDrag
          title="基地照片"
          :visible.sync="dialogbaseArea"
          width="700px"
          :lock-scroll="true"
        >
          <template>
            <el-row :guntter="0">
              <vue-element-loading
                :active="this.$store.state.elementloading.imgLoading"
                spinner="spinner"
                color="#FF6700"
              />
              <el-col :span="6" class="block" v-for="(img,index) in imgs" :key="index">
                <el-image
                  style="width: 180px;height: 200px"
                  :src="BASEURL + img.tImgId"
                  :fit="fit"
                  lazy
                ></el-image>
              </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeImgs">关 闭</el-button>
            </div>
          </template>
          <!-- <span slot="footer" class="dialog-footer"></span> -->
        </el-dialog>

        <!-- 药材质量弹窗 -->
        <el-dialog
          v-dialogDrag
          style="font-family:'微软雅黑'"
          title="药材质量"
          :visible.sync="dialogmedicineValue"
        >
          <mdvalue-form :mdvalueformData="mdValueform"></mdvalue-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogmedicineValue = false">关 闭</el-button>
          </div>
        </el-dialog>

        <!-- 所属公司弹窗 -->
        <el-dialog v-dialogDrag style="font-family:'微软雅黑'" title="所属公司" :visible.sync="dialogCompanyForm">
          <company-form :companyformData="companyform"></company-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogCompanyForm = false">关 闭</el-button>
          </div>
        </el-dialog>

        <!-- gps弹窗 
      @ready="mapReady"
        -->
        <el-dialog v-dialogDrag width="500px" title="Gps位置" :visible.sync="locDialog">
          <template>
            <baidu-map
              class="bm-view"
              :center="center"
              :zoom="zoom"
              :scroll-wheel-zoom="true"
              ak="IGv3m1D92jWLXobdMPUyfY5hCD5j34Oz"
              ref="myMap"
              @click="getClickInfo"
              @row-click="chooseone"
            >
              <bm-scale></bm-scale>
            </baidu-map>
          </template>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closemapdialog">关 闭</el-button>
            <!-- <el-button type="primary" @click="addData('pojoForm')">确 定</el-button> -->
          </div>
        </el-dialog>
      </el-card>
    </div>
    <router-view />
  </div>
</template>

<script src="./index.js"></script>

<style src="./index.css" lang="css" scoped></style>

<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
</style>